import Vue from 'vue'
import VueRouter from 'vue-router'
// 导入登录组件
// 路由懒加载的[配置是为了提高页面加载速度, 拆分 进入不同的模块,加载不同模块的js和样式文件]
const Login = () => import('@/views/Login')
// import Login from '@/views/Login'
// 二级路由组件
const Layout = () => import('@/views/Layout')
const Home = () => import('@/views/Home')
const Question = () => import('@/views/Question')
const Video = () => import('@/views/Video')
const User = () => import('@/views/User')
const Search = () => import('@/views/Search')
const SearchResult = () => import('@/views/Search/components/result')
const Article = () => import('@/views/Article')
const userProfile = () => import('@/views/User/components/userProfile')
const userChat = () => import('@/views/User/components/userChat')

import store from '@/store'
Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    { path: '/login', component: Login },
    { path: '/',
      component: Layout,
      children: [
        // meta表示路由元信息 路由的标志位
        { path: '/', component: Home, meta: { isKeepAlive: true }},
        { path: '/question', component: Question },
        { path: '/video', component: Video },
        { path: '/user', component: User }
      ]
    },
    { path: '/search', component: Search },
    { path: '/searchResult', component: SearchResult },
    { path: '/article/:id', name: 'article', component: Article },
    { path: '/userProfile', component: userProfile },
    { path: '/userChat', component: userChat }
  ]
})
// 路由实例上有前置导航守卫
// to from 都是路由信息对象
// to是要去哪 from是从哪来
// next是一个放行的函数  只要next不调用,页面是看不到的
// 两个权限页面 '/user' '/userProfile' 放到数组中
const authLinks = ['/user', '/userProfile']
router.beforeEach((to, from, next) => {
  const token = store.state.user.tokenInfo.token
  // if (token && to.path === '/login') { // 如果有token并且还要访问登录页, 直接强制用户去首页
  //   next('/')
  //   return
  // }
  // 1. 先判断用户去的页面有没有权限 includes是包含的意思 返回布尔值
  if (authLinks.includes(to.path)) {
    // 访问的是有权限的页面, 做拦截处理
    // console.log('拦截')
    // 先判断用户是否登录(token), 如果用户登录了, 直接放行, 如果用户没有登录, 丢到登录页面
    if (token) {
      next()
    } else {
      // console.log(to)
      // next({ path: `/login?backto=${to.fullPath}` })
      // 需要改造路由地址 fullPath详细信息
      next({ path: `/login`, query: { backto: to.fullPath }})
      // next('/login')
    }
  } else {
    // 访问的是没有权限的页面直接放行
    next()
  }
})

// 找到路由的原型上push方法 捕获一下异常  vue路由的问题
// const originalPush = VueRouter.prototype.push
// VueRouter.prototype.push = function push(location) {
//   return originalPush.call(this, location).catch(err => err)
// }

export default router
